<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>index</title>
    <style>
        html, body {
            width: 100%;
            height: 100%;
        }

        /*div {*/
            /*box-sizing: border-box;*/
        /*}*/

        div.container, div.container2, div.container3 {
            width: 50%;
            height: 40%;
            margin: 10% auto;
            /*border: 1px solid black;*/
            box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.49), -1px -1px 2px rgba(0, 0, 0, 0.49);
        }

        div.container2, div.container3 {
            width: 60%;
            height: 40%;
        }

        div.container3 {
            width: 80%;
            height: 80%;
        }

        div.container1 {
            width: 50%;
            height: 40%;
            margin: 10% auto;
            box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.49), -1px -1px 2px rgba(0, 0, 0, 0.49);
        }

        div.container4 {
            width: 50%;
            height: 40%;
            margin: 10% auto;
            box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.49), -1px -1px 2px rgba(0, 0, 0, 0.49);
        }

        div.container5 {
            width: 50%;
            height: 40%;
            margin: 10% auto;
            box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.49), -1px -1px 2px rgba(0, 0, 0, 0.49);
        }

        div.container6 {
            width: 50%;
            height: 40%;
            margin: 10% auto;
            box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.49), -1px -1px 2px rgba(0, 0, 0, 0.49);
        }
    </style>
    <link rel="stylesheet" href="js/graphStyle.css">
    <!--<link rel="stylesheet" href="color.css">-->
    <script src="js/class.js"></script>
    <script src="../../plugins/d3-v4/d3.min.js"></script>
    <!--<script src="js/d3.v4.min.js"></script>-->
    <script src="../../plugins/jquery/dist/jquery.js"></script>
    <script src="js/diagram.js"></script>
    <script src="js/diagram.pillar.js"></script>
    <script src="js/diagram.pie.js"></script>
    <script src="js/diagram.curve.js"></script>
    <script src="js/diagram.point.js"></script>
    <script src="js/diagram.area.js"></script>
    <script src="js/diagram.numerical.js"></script>
    <!--<script src="diagramData2.js"></script>-->
</head>
<body class="theme-dark1">
<div class="btns">
    <button class="btn1">全量</button>
    <button class="btn2">增量</button>
</div>
<div class="container res"></div>
<div class="container1 res"></div>
<div class="container2 res"></div>
<div class="container3 res"></div>
<div class="container4 res"></div>
<div class="container5 res"></div>
<div class="container6 res"></div>
<script type="text/javascript" src="demo.js"></script>
<script type="text/javascript">

    // var alldata = pillarData;
    // var alldata2 = pieData2;
    document.querySelector('.btn1').onclick = function () {
        console.log('全量');

        aa.redraw(alldata);
        bb.redraw(alldata2);

        if (alldata === pillarData) {
            alldata = pillarData2;
            alldata2 = pieData2;
        }
        else {
            alldata = pillarData;
            alldata2 = pieData2;
        }
    };
    document.querySelector('.btn2').onclick = function () {
        console.log('增量');
    };
    var testdata00 = {
        legend: {
            //data: ['模型A', '模型B', '模型C1', '模型C2', '模型C3', '模型C4'] // 图表legend
        },
        xAxis: {
            data: ['2017/02/1', '2017/02/02', '2017/02/03', '2017/02/04', '2017/02/05', '2017/02/06', '2017/02/07'], // 图表水平坐标轴  require
        },
        series: [
            {
                name: '模型A', // 柱名称
                type: 'stackbar', // 柱形堆叠显示  require （stackbar: 堆叠柱形显示， tilebar: 平铺柱形显示， pie: 饼图显示，curve: 曲线显示， points: 散点）
                data: [100, 111, 444, 30, 305, 110, 90] // 柱值 require
            },
            {
                name: '模型B',
                type: 'stackbar',
                data: [120, 132, 121, 100, 90, 130, 160]
            },
            {
                name: '模型C1',
                type: 'stackbar',
                data: [220, 182, 191, 234, 290, 330, 310]
            },
            {
                name: '模型C2',
                type: 'stackbar',
                data: [220, 182, 191, 234, 290, 330, 310]
            },
            {
              name: '模型C3',
              type: 'stackbar',
              data: [220, 182, 191, 234, 290, 330, 310]
            },
            {
              name: '模型C4',
              type: 'stackbar',
              data: [220, 182, 191, 234, 290, 330, 310]
            },
            {
              name: '模型C5',
              type: 'stackbar',
              data: [220, 182, 191, 234, 290, 330, 310]
            },
            {
              name: '模型C6',
              type: 'stackbar',
              data: [220, 182, 191, 234, 290, 330, 310]
            },
            {
              name: '模型C7',
              type: 'stackbar',
              data: [220, 182, 191, 234, 290, 330, 310]
            },
            {
                name: '模型C8',
                type: 'stackbar',
                data: [220, 182, 191, 234, 290, 330, 310]
            }
        ]
    };
    var testdata01 = {
        legend: {
          data: ['模型A', '模型B', '模型C'] // 图表legend
        },
        title: {
            name: '这是个标题',
                itemStyle: {
                position: 'center',
                    fontSize: 16,
                    // color: 'red'
            }
        },
        yAxis: {
            data: ['2017/02/1', '2017/02/02', '2017/02/03', '2017/02/04', '2017/02/05', '2017/02/06', '2017/02/07'], // 图表水平坐标轴  require
            unit: '%',
        },
        series: [
            {
                name: '模型A', // 柱名称
                unit: '%',
                type: 'stackbar', // 柱形堆叠显示  require （stackbar: 堆叠柱形显示， tilebar: 平铺柱形显示， pie: 饼图显示，curve: 曲线显示， points: 散点）
                data: [0, 0, 100, 0, 0, 0, 0] // 柱值 require
            },

        ]
    };
    var testdata02 = {
        legend: {
            data: ['模型A', '模型B', '模型C'], // 图表legend
            // show: true,
        },
        // yAxis: {
        //   // ticks: [0, 100, 300, 500, 800, 900]
        //   // max: 900,
        //   // min: 0
        // },
        xAxis: {
            data: ['2017/02/1', '2017/02/02', '2017/02/03', '2017/02/04', '2017/02/05', '2017/02/06', '2017/02/07'], // 图表水平坐标轴  require
            brush: true,
            // curve: true,
            fill: true,
            break: true,
            // bar: false,
        },
        series: [
            {
                name: '模型A', // 柱名称
                type: 'curve', // 柱形堆叠显示  require （stackbar: 堆叠柱形显示， tilebar: 平铺柱形显示， pie: 饼图显示，curve: 曲线显示， points: 散点）
                data: ['', '', 4, '', '', 11, 9] // 柱值 require
            },
            {
                name: '模型B',
                type: 'curve',
                data: [120, 132, 121, 1002222, 90, 130, 160]
            },
            {
                name: '模型C',
                type: 'curve',
                data: [220, 182, 192221, 234, 290, 330, 310]
            }
        ]
    };
    var testdata03 = {
        legend: {
            data: ['模型A', '模型B', '模型C'], // 图表legend
        },
        xAxis: {
            data: ['2017/02/1', '2017/02/02', '2017/02/03', '2017/02/04', '2017/02/05', '2017/02/06', '2017/02/07'], // 图表水平坐标轴  require
            brush: true,
            curve: true
        },
        series: [
            {
                name: '模型A', // 柱名称
                type: 'area', // 柱形堆叠显示  require （stackbar: 堆叠柱形显示， tilebar: 平铺柱形显示， pie: 饼图显示，curve: 曲线显示， points: 散点）
                data: [200, 260, 444, 270, 305, 340, 300] // 柱值 require
            },
            {
                name: '模型B',
                type: 'area',
                data: [120, 132, 121, 100, 90, 130, 160]
            },
            {
                name: '模型C',
                type: 'area',
                data: [220, 182, 191, 234, 290, 330, 310]
            }
        ]
    };

    // 饼形图
    var pieData00 = {
        legend: {
            data: ['模型A', '模型B', '模型C'], // legend
            straw: true
        },
        series: [
            {
                name: '模型',
                type: 'pie', // require
                sum: {
                    value: 1548 + 679 + 335,
                    fontSize: 46,
                    color: 'red'
                },
                data: [
                    {value: 335, name: '模型A'}, // 饼值 require
                    {value: 679, name: '模型B'},
                    {value: 1548, name: '模型C'}
                ]
            }
        ]
    };
    // 饼形图
    var pillar = {
        legend: {
            data: ['模型A', '模型B', '模型C'], // legend
            straw: true,
            // ratio: true,
        },
        series: [
            {
                name: '模型',
                type: 'pie', // require
                sum: {
                    value: 1548 + 679 + 335,
                    fontSize: 46,
                    color: 'red'
                },
                data: [
                    {value: 335, name: '模型A'}, // 饼值 require
                    {value: 679, name: '模型B'},
                    {value: 1548, name: '模型C'},
                    {value: 679, name: '模型B1'},
                    {value: 1548, name: '模型C1'},
                    {value: 679, name: '模型B2'},
                    {value: 1548, name: '模型C2'}
                ]
            }
        ]
    };
    // 饼形图
    var pillar2 = {
        title: {
            name: '这是个标题',
            itemStyle: {
                position: 'center',
                fontSize: 16,
                color: 'red'
            }
        },
        legend: {
            //data: ['模型A', '模型B', '模型C'], // legend
            straw: true,
            // ratio: true,
        },
        series: [
            {
                name: '模型',
                type: 'pie', // require
                radius: 0.7,
                data: [
                    {value: 4, name: '模型A'}, // 饼值 require
                    {value: 1, name: '模型B'},
                    // {value: 1548, name: '模型C'},
                    // {value: 679, name: '模型B1'},
                    // {value: 0, name: '模型C1'},
                    // {value: 679, name: '模型B2'},
                    // {value: 1548, name: '模型C2'}
                ]
            }
        ]
    };
    var testdata05 = {
        legend: {
            data: ['2011年', '2012年'],
        },
        yAxis: {
            data: ['巴西', '印尼', '美国', '印度', '中国', '世界人口(万)']
        },
        // xAxis: {
        //   ticks: [],
        // },
        series: [
            {
                name: '2011年',
                type: 'tilebar',
                data: [18203, 23489, 29034, 104970, 131744, 630230]
            },
            {
                name: '2012年',
                type: 'tilebar',
                data: [19325, 23438, 31000, 121594, 134141, 681807]
            }
        ]
    };
    var testdata07 = {
        legend: {
            data: ['巴西', '印尼', '美国', '印度', '中国', '世界人口(万)'],
        },
        yAxis: {
            data: ['2011年']
        },
        // xAxis: {
        //   ticks: [],
        // },
        series: [
            {
                name: '巴西',
                type: 'tilebar',
                data: [18203]
            },
            {
                name: '印尼',
                type: 'tilebar',
                data: [19325]
            },
            {
                name: '美国',
                type: 'tilebar',
                data: [19325]
            },
            {
                name: '印度',
                type: 'tilebar',
                data: [19325]
            },
            {
                name: '中国',
                type: 'tilebar',
                data: [19325]
            },
            {
                name: '世界人口(万)',
                type: 'tilebar',
                data: [19325]
            }
        ]
    };
    var testdata06 = {
        legend: {
            data: ['2011年', '2012年'],
        },
        xAxis: {
            data: ['巴西', '印尼', '美国', '印度', '中国', '世界人口(万)']
        },
        // xAxis: {
        //   ticks: [],
        // },
        series: [
            {
                name: '2011年',
                type: 'tilebar',
                data: [18203, 23489, 29034, 104970, 131744, 630230]
            },
            {
                name: '2012年',
                type: 'tilebar',
                data: [19325, 23438, 31000, 121594, 134141, 681807]
            }
        ]
    };
    var pilar11 = {
        'legend': {'data': ['SYSLOG', 'EX-WINDOWS', 'LINUXSSH', 'EX-LINUX', 'MYSQL', 'EX-PROCESS']},
        'xAxis': {'data': ['SYSLOG', 'EX-WINDOWS', 'LINUXSSH', 'EX-LINUX', 'MYSQL', 'EX-PROCESS']},
        'series': [{'name': '插件告警分布', 'type': 'stackbar', 'data': ['7', '13', '11', '33', '4', '2']}]
    };
    var areaData5 = {
        'title': {'name': 'CPU-系统CPU使用率', 'itemStyle': {'fontSize': 12, 'position': 'left'}},
        'legend': {'data': ['prd_demo_26', 'prd_install_27']},
        'xAxis': {
            'data': ['2018-03-05 16:00:00', '2018-03-06 00:00:00', '2018-03-06 08:00:00', '2018-03-06 16:00:00', '2018-03-07 00:00:00', '2018-03-07 08:00:00', '2018-03-07 08:00:33', '2018-03-07 16:00:00', '2018-03-07 16:00:35', '2018-03-08 00:00:00', '2018-03-08 08:00:00', '2018-03-08 16:00:00', '2018-03-09 00:00:00', '2018-03-09 08:00:00', '2018-03-09 16:00:00', '2018-03-10 00:00:00', '2018-03-10 08:00:00', '2018-03-10 16:00:00', '2018-03-11 00:00:00', '2018-03-11 08:00:00', '2018-03-11 16:00:00', '2018-03-12 00:00:00', '2018-03-12 08:00:00', '2018-03-12 16:00:00', '2018-03-13 00:00:00', '2018-03-13 08:00:00', '2018-03-13 16:00:00', '2018-03-14 00:00:00', '2018-03-14 08:00:00', '2018-03-14 16:00:00', '2018-03-15 00:00:00', '2018-03-15 08:00:00', '2018-03-15 16:00:00', '2018-03-16 00:00:00', '2018-03-16 08:00:00', '2018-03-16 16:00:00', '2018-03-17 00:00:00', '2018-03-17 08:00:00', '2018-03-17 16:00:00', '2018-03-18 00:00:00', '2018-03-18 08:00:00', '2018-03-18 16:00:00', '2018-03-19 00:00:00', '2018-03-19 08:00:00', '2018-03-19 16:00:00', '2018-03-20 00:00:00', '2018-03-20 08:00:00', '2018-03-20 16:00:00', '2018-03-21 00:00:00', '2018-03-21 08:00:00', '2018-03-21 16:00:00', '2018-03-22 00:00:00', '2018-03-22 08:00:00', '2018-03-22 16:00:00', '2018-03-23 00:00:00', '2018-03-23 08:00:00', '2018-03-23 16:00:00', '2018-03-24 00:00:00', '2018-03-24 08:00:00', '2018-03-24 08:00:44', '2018-03-24 16:00:00', '2018-03-24 16:00:22', '2018-03-24 16:00:23', '2018-03-25 08:00:00', '2018-03-25 16:00:00', '2018-03-26 00:00:00', '2018-03-26 08:00:00', '2018-03-26 08:00:00', '2018-03-26 16:00:00', '2018-03-27 08:00:00', '2018-03-27 16:00:00', '2018-03-28 00:00:00', '2018-03-28 08:00:00', '2018-03-28 16:00:00', '2018-03-29 00:00:00', '2018-03-29 08:00:00', '2018-03-29 16:00:00', '2018-03-30 00:00:00', '2018-03-30 08:00:00', '2018-03-30 16:00:00', '2018-03-31 00:00:00', '2018-03-31 08:00:00', '2018-03-31 16:00:00', '2018-04-01 00:00:00', '2018-04-01 08:00:00', '2018-04-01 16:00:00', '2018-04-02 00:00:00', '2018-04-02 08:00:00', '2018-04-02 16:00:00', '2018-04-03 00:00:00', '2018-04-03 08:00:00', '2018-04-03 16:00:00', '2018-04-04 00:00:00', '2018-04-04 08:00:00', '2018-04-04 16:00:00', '2018-04-05 00:00:00', '2018-04-05 08:00:00', '2018-04-05 16:00:00', '2018-04-06 00:00:00', '2018-04-06 08:00:00', '2018-04-06 16:00:00', '2018-04-17 16:00:00', '2018-04-18 08:00:00', '2018-04-18 16:00:00', '2018-04-19 00:00:00', '2018-04-19 08:00:00', '2018-04-19 16:00:00', '2018-04-20 00:00:00', '2018-04-20 08:00:00', '2018-04-20 16:00:00', '2018-04-21 00:00:00', '2018-04-21 08:00:00', '2018-04-21 16:00:00', '2018-04-22 00:00:00', '2018-04-22 08:00:00', '2018-04-22 16:00:00', '2018-04-23 00:00:00', '2018-04-23 08:00:00', '2018-04-23 16:00:00', '2018-04-24 00:00:00', '2018-04-24 08:00:00', '2018-04-24 16:00:00', '2018-04-25 00:00:00', '2018-04-25 08:00:00', '2018-04-25 16:00:00', '2018-06-12 00:00:00', '2018-06-12 08:00:00', '2018-06-12 16:00:00', '2018-06-13 00:00:00', '2018-06-13 08:00:00', '2018-06-13 16:00:00', '2018-06-14 00:00:00', '2018-06-14 08:00:00', '2018-06-14 16:00:00', '2018-06-15 00:00:00', '2018-06-15 08:00:00', '2018-06-15 16:00:00', '2018-06-16 00:00:00', '2018-06-16 08:00:00', '2018-06-16 16:00:00', '2018-06-17 00:00:00', '2018-06-17 08:00:00', '2018-06-17 16:00:00', '2018-06-18 00:00:00', '2018-06-18 08:00:00', '2018-06-18 16:00:00', '2018-06-19 00:00:00', '2018-06-19 08:00:00', '2018-06-19 16:00:00', '2018-06-20 00:00:00', '2018-06-21 08:00:00', '2018-06-21 16:00:00', '2018-06-22 00:00:00', '2018-06-22 08:00:00', '2018-06-22 08:00:24', '2018-06-22 16:00:00', '2018-06-23 00:00:00', '2018-06-23 08:00:00', '2018-06-23 08:00:13', '2018-06-23 16:00:00', '2018-06-23 16:00:03', '2018-06-24 00:00:00'],
            brush: true,
        },
        'series': [{
            'name': 'prd_demo_26',
            'type': 'areaCompare',
            // "rangey": [0, 200],
            'data': ['1.63', '4.64', '5.13', '6.46', '6.17', '12.84', '56.54', '56.54', '56.54', '41.98', '4.92', '8.25', '5.59', '4.56', '5.55', '4.42', '5.38', '4.35', '4.21', '3.42', '2.71', '6.17', '5.0', '10.0', '22.49', '3.4', '4.72', '3.44', '2.71', '7.5', '11.44', '6.38', '6.76', '5.71', '4.5', '5.05', '14.0', '6.92', '4.6', '3.57', '4.17', '5.13', '5.6', '7.22', '18.93', '73.8', '4.42', '14.43', '4.59', '4.75', '7.13', '8.95', '14.78', '18.68', '6.92', '7.31', '4.88', '10.28', '6.25', '6.25', '0.43', '0.43', '19.52', '2.71', '8.67', '1.38', '2.75', '3.15', '3.15', '3.88', '30.4', '10.51', '10.5', '4.92', '3.11', '2.78', '3.57', '3.61', '1.88', '4.25', '6.3', '3.38', '1.63', '1.38', '2.21', '1.44', '1.17', '2.03', '2.65', '8.75', '1.3', '3.36', '7.97', '5.09', '1.42', '22.45', '39.15', '5.96', '9.6', '8.52', '5.97', '4.63', '6.92', '8.75', '5.96', '3.5', '5.59', '3.13', '4.92', '2.69', '7.17', '5.38', '5.09', '28.97', '5.01', '8.59', '5.13', '9.45', '12.87', '9.25', '6.42', '4.77', '15.92', '6.35', '8.6', '13.59', '4.34', '9.95', '20.63', '15.03', '10.76', '9.75', '23.4', '14.11', '23.68', '12.34', '7.34', '4.52', '13.87', '6.8', '4.92', '23.95', '10.02', '5.13', '8.09', '4.46', '4.46', '6.71', '6.81', '5.88', '3.34', '7.8', '7.89', '2.92', '3.5', '3.5', '3.88', '6.59', '8.67', '8.67', '8.67', '7.34']
        }, {
            'name': 'prd_install_27',
            'type': 'areaCompare',
            'rangey': [0, 1600],
            'data': ['1.0', '0.94', '9.67', '3.34', '5.51', '2.05', '4.34', '47.36', '1.81', '1.42', '49.87', '1.3', '3.09', '48.37', '2.28', '2.36', '7.0', '1.56', '3.05', '6.27', '4.97', '3.82', '1.8', '2.94', '10.09', '2.05', '2.19', '45.61', '1.42', '2.42', '23.61', '4.42', '1.56', '46.79', '37.15', '2.19', '1.88', '35.15', '3.53', '2.76', '3.34', '2.94', '3.28', '1.55', '1.68', '2.69', '1.8', '2.34', '2.59', '1.67', '3.07', '3.84', '3.67', '3.96', '2.03', '1.68', '2.0', '1.67', '1.44', '3.17', '2.01', '1.88', '1.88', '2.01', '0.35', '1.37', '1.38', '2.34', '1.13', '1.13', '1.13', '1.63', '46.61', '1.63', '1.67', '7.5', '3.69', '1.63', '3.69', '3.69', '1.69', '2.09', '3.23', '48.83', '17.52', '1.43', '3.36', '3.86', '3.82', '10.93', '2.28', '1.38', '50.47', '1.83', '2.03', '37.97', '2.28', '2.53', '2.28', '3.59', '3.46', '4.05', '4.01', '3.67', '3.69', '3.86', '3.59', '2.17', '3.05', '2.44', '1.63', '1.5', '1.5', '1.93', '5.05', '3.44', '1.87', '1.56', '8.34', '3.44', '2.69', '4.25', '5.3', '2.92', '10.18', '1.88', '1.63', '47.36', '2.34', '2.01', '4.55', '2.67', '3.51', '47.79', '4.13', '4.13', '11.5', '4.63', '3.34', '7.06', '3.61', '1.67', '5.38', '2.71', '3.53', '11.45', '3.34', '3.67', '11.09', '11.09', '1.38', '1.38', '2.69', '52.58', '2.01', '1.92', '46.75', '1.42', '1.42', '1.68', '4.1', '4.5', '12.51', '2.01', '1.88', '50.58', '1.63', '1.63', '1.42', '2.21', '2.92', '3.09', '1.63', '1.5', '2.09', '1.38', '1.42', '1.56', '1.67', '44.04', '9.62', '1.88', '1.63', '24.04', '1.62', '1.87', '46.15', '2.73', '2.42', '6.97', '2.51', '2.17', '10.1', '6.05', '2.09', '43.65', '2.01', '2.01', '2.09', '3.23', '2.36', '2.51', '2.69', '46.19', '45.91', '3.21', '1.75', '13.01', '3.11', '2.78', '22.0', '2.17', '2.65', '8.42', '2.19', '2.11', '5.21', '1.68', '1.38', '1.59', '3.03', '2.01', '13.95', '4.55', '2.38', '45.5', '2.09', '1.5', '39.83', '1.38', '1.17', '45.4', '1.13', '1.12', '11.67', '1.3', '1.25', '7.17', '1.42', '1.75', '1.56', '3.69', '1.88', '1.42', '1.62', '1.5', '1.75', '3.19', '3.19', '1.63', '1.63', '1.67']
        }, {
            'name': 'prd_install_28',
            'type': 'areaCompare',
            'rangey': [0, 1600],
            'data': ['1.0', '0.94', '9.67', '3.34', '5.51', '2.05', '4.34', '47.36', '1.81', '1.42', '49.87', '1.3', '3.09', '48.37', '2.28', '2.36', '7.0', '1.56', '3.05', '6.27', '4.97', '3.82', '1.8', '2.94', '10.09', '2.05', '2.19', '45.61', '1.42', '2.42', '23.61', '4.42', '1.56', '46.79', '37.15', '2.19', '1.88', '35.15', '3.53', '2.76', '3.34', '2.94', '3.28', '1.55', '1.68', '2.69', '1.8', '2.34', '2.59', '1.67', '3.07', '3.84', '3.67', '3.96', '2.03', '1.68', '2.0', '1.67', '1.44', '3.17', '2.01', '1.88', '1.88', '2.01', '0.35', '1.37', '1.38', '2.34', '1.13', '1.13', '1.13', '1.63', '46.61', '1.63', '1.67', '7.5', '3.69', '1.63', '3.69', '3.69', '1.69', '2.09', '3.23', '48.83', '17.52', '1.43', '3.36', '3.86', '3.82', '10.93', '2.28', '1.38', '50.47', '1.83', '2.03', '37.97', '2.28', '2.53', '2.28', '3.59', '3.46', '4.05', '4.01', '3.67', '3.69', '3.86', '3.59', '2.17', '3.05', '2.44', '1.63', '1.5', '1.5', '1.93', '5.05', '3.44', '1.87', '1.56', '8.34', '3.44', '2.69', '4.25', '5.3', '2.92', '10.18', '1.88', '1.63', '47.36', '2.34', '2.01', '4.55', '2.67', '3.51', '47.79', '4.13', '4.13', '11.5', '4.63', '3.34', '7.06', '3.61', '1.67', '5.38', '2.71', '3.53', '11.45', '3.34', '3.67', '11.09', '11.09', '1.38', '1.38', '2.69', '52.58', '2.01', '1.92', '46.75', '1.42', '1.42', '1.68', '4.1', '4.5', '12.51', '2.01', '1.88', '50.58', '1.63', '1.63', '1.42', '2.21', '2.92', '3.09', '1.63', '1.5', '2.09', '1.38', '1.42', '1.56', '1.67', '44.04', '9.62', '1.88', '1.63', '24.04', '1.62', '1.87', '46.15', '2.73', '2.42', '6.97', '2.51', '2.17', '10.1', '6.05', '2.09', '43.65', '2.01', '2.01', '2.09', '3.23', '2.36', '2.51', '2.69', '46.19', '45.91', '3.21', '1.75', '13.01', '3.11', '2.78', '22.0', '2.17', '2.65', '8.42', '2.19', '2.11', '5.21', '1.68', '1.38', '1.59', '3.03', '2.01', '13.95', '4.55', '2.38', '45.5', '2.09', '1.5', '39.83', '1.38', '1.17', '45.4', '1.13', '1.12', '11.67', '1.3', '1.25', '7.17', '1.42', '1.75', '1.56', '3.69', '1.88', '1.42', '1.62', '1.5', '1.75', '3.19', '3.19', '1.63', '1.63', '1.67']
        },
            {
                'name': 'prd_install_29',
                'type': 'areaCompare',
                // "rangey": [0, 160],
                'data': ['1.0', '0.94', '9.67', '3.34', '5.51', '2.05', '4.34', '47.36', '1.81', '1.42', '49.87', '1.3', '3.09', '48.37', '2.28', '2.36', '7.0', '1.56', '3.05', '6.27', '4.97', '3.82', '1.8', '2.94', '10.09', '2.05', '2.19', '45.61', '1.42', '2.42', '23.61', '4.42', '1.56', '46.79', '37.15', '2.19', '1.88', '35.15', '3.53', '2.76', '3.34', '2.94', '3.28', '1.55', '1.68', '2.69', '1.8', '2.34', '2.59', '1.67', '3.07', '3.84', '3.67', '3.96', '2.03', '1.68', '2.0', '1.67', '1.44', '3.17', '2.01', '1.88', '1.88', '2.01', '0.35', '1.37', '1.38', '2.34', '1.13', '1.13', '1.13', '1.63', '46.61', '1.63', '1.67', '7.5', '3.69', '1.63', '3.69', '3.69', '1.69', '2.09', '3.23', '48.83', '17.52', '1.43', '3.36', '3.86', '3.82', '10.93', '2.28', '1.38', '50.47', '1.83', '2.03', '37.97', '2.28', '2.53', '2.28', '3.59', '3.46', '4.05', '4.01', '3.67', '3.69', '3.86', '3.59', '2.17', '3.05', '2.44', '1.63', '1.5', '1.5', '1.93', '5.05', '3.44', '1.87', '1.56', '8.34', '3.44', '2.69', '4.25', '5.3', '2.92', '10.18', '1.88', '1.63', '47.36', '2.34', '2.01', '4.55', '2.67', '3.51', '47.79', '4.13', '4.13', '11.5', '4.63', '3.34', '7.06', '3.61', '1.67', '5.38', '2.71', '3.53', '11.45', '3.34', '3.67', '11.09', '11.09', '1.38', '1.38', '2.69', '52.58', '2.01', '1.92', '46.75', '1.42', '1.42', '1.68', '4.1', '4.5', '12.51', '2.01', '1.88', '50.58', '1.63', '1.63', '1.42', '2.21', '2.92', '3.09', '1.63', '1.5', '2.09', '1.38', '1.42', '1.56', '1.67', '44.04', '9.62', '1.88', '1.63', '24.04', '1.62', '1.87', '46.15', '2.73', '2.42', '6.97', '2.51', '2.17', '10.1', '6.05', '2.09', '43.65', '2.01', '2.01', '2.09', '3.23', '2.36', '2.51', '2.69', '46.19', '45.91', '3.21', '1.75', '13.01', '3.11', '2.78', '22.0', '2.17', '2.65', '8.42', '2.19', '2.11', '5.21', '1.68', '1.38', '1.59', '3.03', '2.01', '13.95', '4.55', '2.38', '45.5', '2.09', '1.5', '39.83', '1.38', '1.17', '45.4', '1.13', '1.12', '11.67', '1.3', '1.25', '7.17', '1.42', '1.75', '1.56', '3.69', '1.88', '1.42', '1.62', '1.5', '1.75', '3.19', '3.19', '1.63', '1.63', '1.67']
            }]
    };
    var pieData0 = {
        'legend': {'straw': true},
        'title': {'name': '', 'itemStyle': {'position': 'center', 'fontSize': 16}},
        'series': [{
            'name': '本次代码漏洞',
            'type': 'pie',
            'radius': 0.7,
            'data': [{'value': 20, 'name': '高危漏洞'}, {'value': 176, 'name': '严重漏洞'}]
        }]
    };
    var test11 = {
        'title': {'name': '', 'itemStyle': {'position': 'center', 'fontSize': 16}},
        'legend': {'data': ['代码有效行', '代码总行数']},
        'xAxis': {'data': ['07-03 09:50:08', '07-03 10:17:24', '07-03 10:26:32', '07-23 11:53:38', '07-25 12:47:15']},
        'series': [{
            'name': '代码有效行',
            'type': 'tilebar',
            // 'itemStyle': {'barInterval': '10%'},
            'data': [11252, 11252, 11252, 11252, 11252]
        },
            {'name': '代码总行数', 'type': 'tilebar', 'data': [13813, 13813, 13813, 13813, 13813]}]
    };

    var curveTest = {
        'legend': {
            show: true,
            position: 'top',
        },
        'xAxis': {
            'break': false,
            'fill': false,
            'startTime': 1541030400000,
            'endTime': 1541548800000,
            'brush': true,
            'curve': false,
            'point': true,
        },
        series: [
            {
                name: '线条1',
                type: 'curve',
                'unit': 'Maa',
                threshold: 100,
                data: [[1541030400000, 120, '11dfa'], [1541116800000, 220, '12dfa'], [1541203200000, 140, '13dfa'], [1541289600000, 330, '14dfa'], [1541376000000, 370, '15dfa'], [1541462400000, 300, '16dfa'], [1541548800000, 390, '17dfa']]
            },
            {
                name: '线条2',
                type: 'curve',
                'unit': 'Maa',
                threshold: 200,
                data: [[1541030400000, 77], [1541116800000, 111], [1541203200000, 112], [1541289600000, 222], [1541376000000, 333], [1541462400000, 444], [1541548800000, 234]]
            },
            {
                name: '线条3',
                type: 'curve',
                'unit': 'Maa',
                threshold: 300,
                data: [[1541030400000, 11], [1541116800000, 111], [1541203200000, 222], [1541289600000, 333], [1541376000000, 444], [1541462400000, 123], [1541548800000, 234]]
            }
        ]
    };

    var curveTest1 = {
        'legend': {'show': true, 'position': 'top'},
        'xAxis': {
            'break': false,
            'fill': false,
            'brush': true,
            'curve': false,
            'point': true,
            'startTime': 1541952000 * 1000,
            'endTime': 1542556800 * 1000
        },
        'series': [{
            'type': 'curve',
            'name': '巡检',
            threshold: 0.15,
            'data': [[1541952000 * 1000, '0.01', '0小时0分20秒'],  [1542556800 * 1000, '0.10', '0小时6分15秒']]
        }, {
            'type': 'curve',
            'name': '巡检1',
            threshold: 0.2,
            'data': [[1541952000 * 1000, '0.02', '0小时0分20秒'], [1542556800 * 1000, '0.40', '0小时6分15秒']]
        }]
    };

    // 饼形图
    var pillar111 = {
        legend: {
            data: ['模型A', '模型B', '模型C'], // legend
            straw: true,
            fontSize: 16,
            // ratio: true,
        },
        series: [
            {
                name: '模型',
                type: 'pie', // require
                sum: {
                    value: 1548 + 679 + 335,
                    // fontSize: 56,
                    color: 'red'
                },
                data: [
                    {value: 10, name: '未提交事务Gdd'}, // 饼值 require
                    {value: 3611, name: '未提交事务Aff'},
                    {value: 1548, name: '未提交事务Bff'},
                    {value: 679, name: '未提交事务Caa说说'},
                    {value: 1548, name: '未提交事务Bf事务11'},
                    {value: 679, name: '未提交事务C111'},
                    {value: 1548, name: '未提交事务D'},
                    {value: 679, name: '未提交事务E'},
                    {value: 1548, name: '未提交事务F'}
                ]
            }
        ]
    };

    var pieDemo2 = {
        legend: {
            straw: true,
            show: false,
            strawText: true,   // 是否显示label，默认显示，false不显示
            strawValue: true,  // 是否显示label value，默认显示，false不显示
            strawRatio: true, // 是否显示百分比，默认不显示，true显示
            periphery: 1, // 圆周大小，默认为1，取值范围：0 ~ 1
            padAngle: 1, // 环padding设置,角度，默认为0，取值范围：0 ~ 360
        },
        series: [
            {
                type: 'pie',
                sum: {
                    value: 36,
                    fontSize: 36,
                    color: 'red'
                },
                data: [
                    {value: 9, name: '交易类交易交易类交易交易类交易类交易类交易', unit: 'T'},
                    {value: 6, name: '交易类', unit: 'T'},
                    {value: 5, name: '类交易类交易类类交易类交易类交易类交易类', unit: 'T'}
                ]
            }
        ]
    }
    var aa = new Tsdiagram.Diagram(document.querySelector('.container'), pieDemo2, {
        color: ['red', 'blue', 'orange'],
    });
    var bb = new Tsdiagram.Diagram(document.querySelector('.container1'), pillarDemo3);
    // var cc = new Tsdiagram.Diagram(document.querySelector('.container2'), pillar111, {
    //   loopWidth: 60,
    //   color: ['red', 'orange', 'blue']
    // });
    // var dd = new Tsdiagram.Diagram(document.querySelector('.container3'), testdata10);

    // var ee = new Tsdiagram.Diagram(document.querySelector('.container4'), areaData4);
    // var ff = new Tsdiagram.Diagram(document.querySelector('.container5'), curveData);
    // var gg = new Tsdiagram.Diagram(document.querySelector('.container6'), pointsData2);
    console.log('hello world!', 'good morning!');
    window.onresize = function () {
        $('div.res').trigger('diagramresize');
        // aa.resize()
        // bb.resize()
        // cc.resize()
        // dd.resize()
        // ee.resize()
        // aa.redraw(reData)
    };
</script>
</body>
</html>